<!--  -->
<template>
  <div class="Home">
    <h2 class="title">来人统计</h2>
    <div class="allBox">
      <div class="chooseText">
        <span
          :class="idx === index ? 'curr' : ''"
          v-for="(item, index) in topData"
          :key="index"
          @click="topChooseClick(index)">
          {{ item }}
        </span>
        <p style="line-height: 30px; margin-left: 50px">自定义：</p>
        <DatePicker
          type="daterange"
          :clearable="false"
          @on-change="dataChoose"
          ref="oselect"
          :options="options"
          placeholder="请选择时间"
          style="width: 220px"></DatePicker>
        <div style="margin-left: auto">
          <Button type="primary" @click="reVisitorExport">导出</Button>
        </div>
      </div>
      <dt-grid ref="table" :page="page" :onFetch="onFetch" />
    </div>
  </div>
</template>

<script>
  import homeMgr from '@/biz/buildingHome/home'
  import visitColumn from './column'
  export default {
    components: {},
    data() {
      return {
        options: {
          disabledDate(date) {
            return date && date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
          }
        },

        topData: ['近七日', '本周', '本月'],
        idx: 1,
        startTime: '',
        endTime: '',
        loading: false,
        //分页
        page: {
          rows: 10
        }
      }
    },
    computed: {},
    watch: {},
    methods: {
      topChooseClick(index) {
        if (this.loading) {
          return false
        }
        this.idx = index
        this.$refs.oselect.handleClear()
        if (index == 0) {
          this.startTime = this.$tool.getDayRi(-6)
          this.endTime = this.$tool.getDayRi(0)
          console.log(this.startTime, this.endTime, '近七日')
        } else if (index == 1) {
          this.startTime = this.$tool.currentWeek()[0]
          this.endTime = this.$tool.currentWeek()[1]
          console.log(this.startTime, this.endTime, '本周')
        } else if (index == 2) {
          this.startTime = this.$tool.currentMonth()[0]
          this.endTime = this.$tool.currentMonth()[1]
          console.log(this.startTime, this.endTime, '本月')
        }
        this.$refs.table.fetch(true)
      },
      dataChoose(val) {
        if (val[0] != '' && val[1] != '') {
          val = this.$dt.tool.handleDateRange(val)
          this.idx = null
          this.startTime = val[0]
          this.endTime = val[1]
          this.$refs.table.fetch(true)
          console.log(this.startTime, this.endTime, '自定义')
        }
      },

      //访客详情分页查询
      onFetch(data) {
        let _this = this
        this.loading = true
        let params = {
          buildingIds: [this.$dt.buildInfo().housesId],
          startTime: this.startTime,
          endTime: this.endTime,
          ...data
        }
        return homeMgr
          .getCustomerPageQuery(params)
          .then((res) => {
            // 新封装的请求，有判断频繁请求返回上一次结果
            setTimeout(function () {
              _this.loading = false
            }, 500)
            return {
              list: res.records,
              total: parseInt(res.total)
            }
          })
          .catch((err) => {
            this.loading = false
          })
      },
      //导出
      reVisitorExport() {
        let params = {
          buildingIds: [this.$dt.buildInfo().housesId],
          startTime: this.startTime,
          endTime: this.endTime,
          type: 1
        }
        homeMgr
          .visitorExport(params)
          .then((res) => {})
          .catch((err) => {})
      }
    },
    created() {
      this.startTime = this.$tool.currentWeek()[0]
      this.endTime = this.$tool.currentWeek()[1]
    },
    mounted() {
      this.$refs.table.init(this, new visitColumn(this))
      this.$refs.table.fetch()
    }
  }
</script>
<style lang="scss" scoped>
  .Home {
    padding: 20px;

    .allBox {
      margin-top: 20px;

      .chooseText {
        margin: 10px 0;
        height: 40px;
        border-radius: 2px;
        padding: 5px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;

        span {
          height: 30px;
          border: #dcdee2 1px solid;
          width: 90px;
          text-align: center;
          line-height: 30px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          margin-right: 5px;
        }

        span.curr {
          border: #2d8cf0 1px solid;
          color: #2d8cf0;
        }
      }

      .tab {
        margin-top: 20px;
      }
    }
  }
</style>
